<template>
  <div class="baseDatilebox">
    <div class="box-item">
      <div class="box-item-header">
        <div class="item-left">
          <a-tooltip placement="topRight" overlayClassName="bgc_tooltip1">
            <template slot="title">
              <span>{{ boxTitlename }}</span>
            </template>
            <span class="box-card-title">{{ boxTitlename }}</span>
          </a-tooltip>
        </div>
        <div class="item-right">
          <a-checkbox v-model="checked" v-if="!isshowWtdg" />
        </div>
      </div>
      <div class="box-item-content">
        <div class="item-content-text">
          <slot name="boxContent"></slot>
        </div>
        <span v-if="!isshowWtdg" class="zhanwei"></span>
      </div>
      <div class="item-footer">
        <a-button :disabled="disabled" class="item-search-data" @click="checkfxzb">分析指标查询</a-button>
        <a-button :disabled="disabled" class="item-search-data" v-if="isshowWtdg" @click="checkwtdg">
          问题底稿查看
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseDatilebox',
  props: {
    boxTitle: {
      type: Object,
      default: {},
    },
    isshowWtdg: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    checked: {
      handler(val) {
        this.$emit('handleSelected', this.boxTitle.id, val)
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    boxTitlename() {
      console.log(this.boxTitle.modelName || this.boxTitle.mxmc)
      return this.boxTitle.modelName || this.boxTitle.mxmc
    },
  },
  methods: {
    checkfxzb() {
      this.$emit('checkfxzb', this.boxTitle.modelId||this.boxTitle.id)
    },
    checkwtdg() {
      this.$emit('checkwtdg', this.boxTitle.modelId,this.boxTitlename)
    },
    handleChange({ target: { checked } }) {
      this.$emit('handleSelected', this.boxTitle.id, checked)
    },
  },
}
</script>

<style lang="less">
.bgc_tooltip1 {
  .ant-tooltip-inner {
    color: #2e4cba;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
.baseDatilebox {
  width: 210px;
  height: 165px;
  margin: 12px 12px;
  padding: 5px 0px 10px 0px;
  box-shadow: 2px 2px 5px #2e4cba;
  border: 1px solid #2e4cba;
  border-radius: 5px;
  box-sizing: content-box;
  .box-item {
    width: 100%;
    .box-item-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .item-left {
        width: 87%;
        overflow: hidden;
        text-overflow: ellipsis;
        .box-card-title {
          cursor: pointer;
          white-space: nowrap;
          text-align: left;
          font-weight: 700;
          font-size: 16px;
          color: white;
          background-color: #2e4cba;
        }
      }
      .item-right {
        width: 13%;
        /deep/ .ant-checkbox-checked {
          .ant-checkbox-inner {
            background-color: #2e4cba;
            border-color: #2e4cba;
          }
        }
        /deep/ .ant-checkbox-checked::after {
          border: 1px solid #2e4cba;
        }
      }
    }
  }
  .box-item-content {
    .zhanwei {
      display: block;
      height: 50px;
    }
    .item-content-text {
      width: 95%;
      margin: 10px;
      p {
        margin-bottom: 8px;
        span {
          font-weight: 700;
        }
      }
    }
    .analyzeResult {
      height: 45px;
      overflow: hidden;
      cursor: pointer;
      text-overflow: ellipsis;
      /* 将对象作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      /*!autoprefixer:off*/
      -webkit-box-orient: vertical;
      /*autoprefixer:on*/
    }
    .box-card-subtitle {
      display: inline-block;
      width: 115px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; /*超出部分用...代替*/
      vertical-align: bottom;
    }
    .item-content-b {
      color: #2e4cba;
    }
    .item-content-box {
      width: 100%;
      height: 105px;
      overflow-y: scroll;
    }
  }
  .item-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .item-search-data {
      width: 90%;
      height: 30px;
      border: 1px solid #2e4cba;
      color: #2e4cba;
      margin-top: 10px;
    }
  }
}
.baseDatilebox:hover {
  box-shadow: 2px 2px 5px #ef9325;
  border: 1px solid #ef9325;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  .box-item-header {
    .item-left {
      .box-card-title {
        background-color: #ef9325;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
    .item-right {
    }
  }

  .item-content-b {
    color: #ef9325;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  // .item-search-data {
  //   border: 1px solid #ef9325;
  //   color: white;
  //   background-color: #ef9325;
  // }
  /deep/ .ant-btn:hover {
    border-color: #ef9325;
  }
}
</style>